<template>
  <div class="app-container customer-page-box">
    <div class="search">
      <div class="top">
        <p>高级搜索</p>
      </div>
      <div class="bottom">
        <el-form
          ref="queryForm"
          class="cus-search-box"
          :inline="true"
          label-width="100px"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="课程编号：" width="300">
                <el-input
                  v-model="form.code"
                  placeholder="请输入课程编号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="课程学科：">
                <el-select
                  v-model="form.subject"
                  placeholder="请选择课程学科"
                  clearable
                >
                  <el-option
                    v-for="e in subjectList"
                    :key="e.dictValue"
                    :label="e.dictLabel"
                    :value="e.dictLabel"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="课程名称：">
                <el-input
                  v-model="form.name"
                  placeholder="请输入课程名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="适应人群：">
                <el-select
                  v-model="form.applicablePerson"
                  placeholder="请选择适应人群"
                  clearable
                >
                  <el-option
                    v-for="dict in peoList"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建日期：">
                <el-date-picker
                  v-model="dateList"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="resetDate"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="search-btn wp-50">
            <el-button
              class="cus-search-btn"
              type="primary"
              @click="search"
            >搜索</el-button>
            <el-button class="cus-reset-btn" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="cus-btn-box">
      <div class="cus-btn-con">
        <el-button
          class="primary-btn"
          @click="addCourses"
        >+ 添加课程</el-button>
        <el-button
          type="danger"
          @click="delCourses"
        >批量删除</el-button>
      </div>
    </div>

    <div>
      <div>
        <el-table
          ref="table"
          v-loading="isLoading"
          class="cus-table-box"
          stripe
          :data="list"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="62" align="center" />
          <el-table-column
            label="课程编号"
            align="center"
            min-width="80"
            prop="code"
          />
          <el-table-column
            label="课程学科"
            align="center"
            min-width="100"
            prop="subject"
          />
          <el-table-column
            label="课程名称"
            align="center"
            min-width="100"
            prop="name"
          />
          <el-table-column
            label="价格（元）"
            align="center"
            show-overflow-tooltip
            min-width="120"
            prop="price"
          />
          <el-table-column
            label="适应人群"
            align="center"
            show-overflow-tooltip
            min-width="120"
            prop="applicablePerson"
          />
          <el-table-column
            label="课程介绍"
            align="center"
            min-width="100"
            prop="info"
          />
          <el-table-column
            label="创建时间"
            align="center"
            min-width="140"
            sortable
            prop="createTime"
          >
            <template #default="{row}">
              {{ startDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="200"
            class-name="small-padding fixed-width"
          >
            <!--  slot-scope="scope" -->
            <template #default="{row}">
              <el-button
                id="bj"
                size="mini"
                type="text"
                @click="editOpen(row.id)"
              >编辑</el-button>
              <el-button
                id="sc"
                size="mini"
                type="text"
                @click="delCourse(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-container">
          <div class="txt">您已选{{ num }}条</div>
          <el-pagination
            background
            :current-page="Number(form.page)"
            :page-sizes="[10, 50, 100, 150]"
            :page-size="Number(form.pageSize)"
            layout="total, prev, pager, next, sizes"
            :total="Number(total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 添加弹窗 -->
      <addCourse ref="son" :visible.sync="visible" />
    </div>
  </div>
</template>

<script>
import addCourse from './components/addCourse.vue'
import { getCourseListApi, getSubjectListApi, delCourseApi, getCourseDateApi } from '@/api/Course'
import { Message } from 'element-ui'
export default {
  components: {
    addCourse
  },
  data() {
    return {
      isLoading: false,
      // 日期
      dateList: [],
      // 添加弹窗
      visible: false,
      // 选择中的个数
      num: 0,
      // id数组
      ids: [],
      form: {
        page: 1,
        pageSize: 10,
        code: null,
        name: null,
        subject: null,
        applicablePerson: null,
        beginTime: null,
        endTime: null,
        info: null
      },
      total: '',
      txt: '',
      value1: '',
      list: [],
      subjectList: [],
      peoList: []
    }
  },
  created() {
    this.getCourseList()
    this.getSubjectList()
    this.getPeopleList()
  },
  methods: {
    /**
     * 重置按钮
     */
    reset() {
      this.dateList = []
      this.form = {
        page: 1,
        pageSize: 10,
        code: null,
        name: null,
        subject: null,
        applicablePerson: null,
        beginTime: null,
        endTime: null,
        info: null
      }
      this.getCourseList()
    },
    /**
     * 开始时间处理
     */
    startDate(val) {
      const res = val ? val.split('T').join('  ') : '--'
      return res
    },
    /**
     * 修改回显
     */
    async editOpen(id) {
      const res = await getCourseDateApi(id)
      if (res.code === 500) {
        Message.error('获取数据回显失败！')
        return
      }
      this.visible = true
      this.$refs.son.form = res.data
      this.$refs.son.subjectList = this.subjectList
      this.$refs.son.peoList = this.peoList
    },
    /**
     * 搜索功能
     */
    search() {
      this.page = 1
      this.getCourseList()
    },
    /**
     * 时间处理
     */
    resetDate(val) {
      this.form.beginTime = val[0]
      this.form.endTime = val[1]
    },
    /**
     * 多选
     */
    handleSelectionChange(val) {
      this.ids = val.map(e => e.id)
      this.num = val.length
    },
    /**
     * 批量删除
     */
    delCourses() {
      this.$confirm('此操作将删除这些课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delCourseApi([...this.ids])
        if (res.code === 500) {
          Message.error('删除失败！')
          return
        }
        Message.success('删除成功！')
        this.getCourseList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * 删除功能
     */
    delCourse(id) {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delCourseApi([id])
        if (res.code === 500) {
          Message.error('删除失败！')
          return
        }
        Message.success('删除成功！')
        this.getCourseList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * 学科下拉列表
     */
    async getSubjectList() {
      const res = await getSubjectListApi('course_subject')
      if (res.code === 500) {
        Message.error('获取下拉列表失败！')
        return
      }
      this.subjectList = res.data
    },
    /**
     * 适应人群下拉列表
     */
    async getPeopleList() {
      const res = await getSubjectListApi('applicable_person')
      if (res.code === 500) {
        Message.error('获取下拉列表失败！')
        return
      }
      this.peoList = res.data
    },
    /**
     * 获取课程列表
     */
    async getCourseList() {
      this.isLoading = true
      const res = await getCourseListApi(this.form)
      if (res.code === 500) {
        Message.error('课程列表获取失败！')
        return
      }
      this.total = res.data.total
      this.list = res.data.records
      this.isLoading = false
    },
    /**
     * 点击添加
     */
    addCourses() {
      this.visible = true
      this.$refs.son.subjectList = this.subjectList
      this.$refs.son.peoList = this.peoList
    },
    /**
     * 切换页
     */
    handleCurrentChange(val) {
      this.form.page = val
      this.getCourseList()
    },
    /**
     * 切换页容量
     */
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getCourseList()
    }
  }
}
</script>
<style scoped lang='scss'>
#bj{
  color: #3366ff;
}
#sc{
  color: red;
}
 ::v-deep .cus-search-box .el-input__inner{
  width: 300px!important;
}
::v-deep .el-form-item__label{
  font-weight: 400;
  color: #333;
}
.top{
  height: 40px;
  line-height: 40px;
  background: #f2f2f2;
  padding-left: 20px;
  border-radius: 5px;
  margin-top: -20px;
  font-weight: 500;
}
.bottom{
  border: 2px solid #f2f2f2;
  padding: 20px 30px 5px 30px;
}
.search-btn{
    text-align: right;
  }
  .wp-50{
    width: 100% !important;
  }
  .cus-btn-box{
    height: 83px;
    line-height: 83px;
    background: #fff;
    .label{
      width: 100px;
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      color: #332929;
      .num{
        font-size: 14px;
        font-weight: 700;
        color: var(--current-color);
      }
    }
    .cus-btn-con{
      flex: 1;
      text-align: left;
      .el-button{
        // width: 132px;
        height: 40px;
        line-height: 40px;
        background: #3366ff;
        border-radius: 20px;
        font-size: 14px;
        color: #FFF;
        padding: 0 30px;
        border: 0;
        margin-left: 20px;
      }
      .primary-btn{
        background: #3366ff;
        color: #ffffff;
        &:hover{
          background: green;
        }
      }
      .default-btn{
        &:hover{
          background: #8DF;
          color: #ffffff;
        }
      }
    }
  }
  .page-container{
    display: flex;
    justify-content: space-between;
    padding:4px 0px;
    text-align: right;
    .txt{
      width: 80px;
      margin-top: 12px;
    }
  }
 ::v-deep .el-dialog__footer{
    text-align: center;
 }
 ::v-deep .el-dialog__footer .el-button{
  padding: 10px 30px;
  border: 1px solid #000;
 }
 ::v-deep .el-dialog__footer .el-button--primary{
  border: none;
 }
 ::v-deep .el-dialog__body p{
  color: #000;
  font-size: 14px;
  padding-left: 136px;
 }
 ::v-deep .el-range-separator{
  width:30px;
 }
</style>
